<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>訂單</title>
    <meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale=1,user-scalable=no">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="apple-mobile-web-app-status-bar-style" content="black">
    <link rel="stylesheet" href="../../plug-in/mui/css/mui.css">
    <link rel="stylesheet" href="../../plug-in/iconfont/iconfont.css">

    <link rel="stylesheet" href="../common/head.css">
    <link rel="stylesheet" href="index.css">
    <script src="../../plug-in/jquery/jquery-3.4.1.min.js"></script>
    <script src="../../plug-in/cookie/jquery.cookie.js"></script>

    <script src="../common/head.js"></script>

</head>
<body>

<header class="mui-bar mui-bar-nav common-header">
    <a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left"></a>
    <h1 class="mui-title">填寫訂單</h1>
</header>

<div class="mui-content" style="height: 100%;background-color: #f3f3f3;">

    <div class="address-container">
        <div style="float: left; margin-left: 0.5rem">
            <span class="iconfont iconlocation"
                  style="display: block; font-size: 0.9rem; line-height: 2.6rem; color: #fd5806"></span>
        </div>
        <div style="float: left; margin-left: 0.5rem">
            <div style="padding-top: 0.5rem; font-size: 0.3rem">
                <span class="name">高麗</span>
                <span class="phone">13543090058</span>
            </div>
            <div class="address">广东珠海市斗门区乾务镇南新大道尚雅布艺</div>
        </div>
        <div style="float: right">
            <span id="addressBtn" class="mui-icon mui-icon-arrowright"
                  style="float: right;line-height: 2.6rem; color: #7e7e7e;margin-right: 0.3rem;"></span>
        </div>
    </div>

    <div class="product-list">

    </div>

    <div class="pay-container">
        <div style="margin-top: .2rem">
            <div style="float: left; font-size: .3rem">支付方式</div>
            <div style="float: right;  font-size: .3rem; ">貨到付款</div>
            <div style="clear: both"></div>
        </div>
    </div>

    <div class="total-container">
        <div style="margin-top: .2rem">
            <div style="float: left; font-size: .3rem">商品金額</div>
            <div class="product-price">NT$99</div>
            <div style="clear: both"></div>
        </div>
        <div style="margin-top: .2rem">
            <div style="float: left; font-size: .3rem">運費</div>
            <div class="postage-price">+ NT$10</div>
            <div style="clear: both"></div>
        </div>
        <div style="margin-top: .2rem">
            <div style="float: left; font-size: .3rem">退換無憂</div>
            <div class="insurance-price">+ NT$0</div>
            <div style="clear: both"></div>
        </div>
        <div style="margin-top: .2rem">
            <div style="float: left; font-size: .3rem">立減</div>
            <div class="cash-back-price">- NT$0</div>
            <div style="clear: both"></div>
        </div>
        <div style="margin-top: .2rem">
            <div style="float: left; font-size: .3rem">优惠卷</div>
            <div class="coupons-price">- NT$0</div>
            <div style="clear: both"></div>
        </div>
    </div>

</div>

<div class="orders-tool">

    <div style="float: left; line-height: 1.4rem; color: #ff0808; text-align: center;font-weight: bold; font-size: .6rem">
        <span style="padding-right: 0.2rem;">NT$</span><span id="total">109</span>
    </div>

    <div id="orderBtn">提交訂單</div>
</div>

</body>
<script src="../../plug-in/mui/js/mui.js"></script>
<script src="../common/footer.js"></script>
<script src="index.js"></script>
</html>